<template>
  <div class="container w-full h-full">
    <div class="tabs w-full h-full bg-white p-4px box-border" style="font-size: 0">
      <div
        class="item h-full text-768895 font-semibold inline-block relative"
        :class="active === tab.value ? 'bg-51C3FF text-white' : ''"
        v-for="(tab, index) in tabs"
        :key="index"
        @click="switchTab(tab.value)"
      >
        <span class="name absolute">{{ tab.label }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    active: {
      type: [String, undefined],
      default: undefined
    }
  },
  data() {
    return {}
  },
  methods: {
    switchTab(subjectId) {
      this.$emit('change', subjectId)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 54px;

  .tabs {
    border-radius: 35px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

    .item {
      width: 200px;
      font-size: 20px;
      border-radius: 35px;

      .name {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>
